import React, { useState, useEffect } from 'react';
import { CountTableStyled } from './style';
import { toThousands } from '@/utils/tools/common';
import MyPagination from '../rank/cpns/myPagination';

type CountTablePropsType = {
  data: any;
};

const CountTable: React.FC<CountTablePropsType> = (props) => {
  const { data } = props;
  const [showData, setShowData] = useState<any>([]);

  useEffect(() => {
    if (data && data.length) {
      const showArr = data.slice(0, 10);
      setShowData(showArr);
    }
  }, [data]);

  // 切换当前页
  const pageChange = (curPage: number) => {
    
    setShowData(data.slice((curPage - 1) * 10, (curPage - 1) * 10 + 10));
  };

  return (
    <CountTableStyled>
      <table>
        <thead>
          <tr className='table-header'>
            <th style={{ width: '40%' }}>部门</th>
            <th style={{ width: '20%' }}>案卷</th>
            <th style={{ width: '20%' }}>一文一件</th>
            <th style={{ width: '20%' }} className='last'>
              贡献度
            </th>
          </tr>
        </thead>
        <tbody>
          {showData?.map((item: any, index: any) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{toThousands(item.dossierNum)}</td>
              <td>{toThousands(item.archNum)}</td>
              <td className='last'>{item.activity}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <MyPagination total={data.length} pageChange={pageChange} />
    </CountTableStyled>
  );
};

export default CountTable;
